"use client";

import useSWR from "swr";
import {useAuth} from "@/components/authProvider";
import {ThemeToggleButton} from "@/components/themeToggleButton";
import WorkoutsForm from "@/app/workouts/forms";

const fetcher = (...args) => fetch(...args).then(res => res.json());


export default function Home() {
    const auth = useAuth();

    const {data, error, isLoading} = useSWR("http://127.0.0.1:8000/", fetcher);

    if (isLoading) {
        return (
            <div>
                loading...
            </div>
        )
    }
    if (error) {
        return (
            <div>
                failed to load
            </div>
        )
    }

    return (
        <div
            className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
            <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
                <div>
                    <WorkoutsForm />
                </div>
                <div>
                    {auth.isAuthenticated ? "Hello user" : "Hello guest"}
                </div>
                <div>
                    {JSON.stringify(data)}
                </div>
                <div>
                    <ThemeToggleButton />
                </div>
            </main>
        </div>
    );
}
